<template>
	<view style="background-color: rgb(245,245,245);height: 100vh;">
		<view class="">
			<view style="height: 100px;width: 750rpx;" class="">

			</view>
			<van-nav-bar fixed="ture" class="header" left-arrow @click-left="onClickLeft">

			<!-- 	<view class="title-left" slot="left">
					<view class="iconfont icon-xitongfanhui">

					</view>

				</view> -->
				<view class="title-nav" slot="title">
					闲小呗
				</view>
			</van-nav-bar>
		</view>
		<scroll-view scroll-y="true" :style="'height: '+(windowh-160-chatheight)+'px;  width:750rpx;'" class="content"
			:scroll-top="scrollTopHeight" scroll-with-animation="true">
			<view class="chat-content">
				<view class="">
					<u-divider
							@click="getchatinfo()"
					        text="聊天记录"
					        textColor="#2979ff"
					        lineColor="#a0cfff"
					></u-divider>
				</view>
				<view :class="[item.senderid==senderobj.userTel? 'chat-item1':'chat-item2']"
					v-for="(item,index) in chatArr" :key="index">
					<view class="chat-t">
						<view style="max-width: 349rpx;" class="">
							<u-parse v-if="item.msg" :content="item.msg"></u-parse>
						</view>
						<image v-if="item.msgimg" class="chatimg" :src="item.msgimg" mode=""></image>
					</view>
					<image :src="item.headerphoto" mode=""></image>
				</view>
			</view>
		</scroll-view>
		<view class="input-item" :style="{bottom: inputBottom+'px'}">
			<view class="input-item-1">
				<input :adjust-position="false" v-model="msgtxt" @focus="focusTextarea" @blur="blurTextarea" type="text"
					placeholder="想说点什么...">
				<view @click="this.show_e=!this.show_e;this.is_show=false" class="iconfont icon-biaoqing ">
				</view>
				<view @click="this.is_show=!this.is_show;this.show_e=false" class="iconfont icon-jiahao "
					:class="{ activeicon: is_show}">
				</view>
				<view @click="sendMsg()" class="iconfont icon-fasong">
				</view>
			</view>
			<view v-if="is_show" class="tooldiv">
				<view class="tooldiv-item">
					<view class="iconfont icon-31paishexuanzhong">

					</view>
					<view class="tool-txt">
						拍摄
					</view>
				</view>
				<view @click="chooseimg()" class="tooldiv-item">
					<view class="iconfont icon-xiangce">

					</view>
					<view class="tool-txt">
						相册
					</view>
				</view>
				<view class="tooldiv-item">
					<view class="iconfont icon-yuyintonghua">

					</view>
					<view class="tool-txt">
						语音通话
					</view>
				</view>
			</view>
			<swiper v-if="show_e" class="slider" :current="0">
				<swiper-item v-for="(item, key) in emojiData" :key="key" class="slider-emoji"
					:class="[key==emojiData.length-1?'lastbox':'']">
					<text v-for="(emoji, index) in item" :key="index" @click="selemoji(emoji)"
						class="slider-emoji-icon">{{ emoji }}</text>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	// import { log } from "console"
	// import uParse from '@/components/gaoyia-parse/parse.vue'
	import emoji from "../../com/emoji.js"
	import filtering from "../../com/filtering.js"
	import request from '../../com/request.js'
	export default {
		components: {
			// uParse //注册组件
		},
		data() {
			return {
				// 显示聊天工具栏
				is_show: false,
				msgtxt: "", //输入框
				keyboard_h: 40,
				senderobj: '',
				receiverobj: '',
				// scrollTop: 1000,
				inputBottom: 20,
				online: false,
				scrollTopHeight: 0, //聊天下来高度
				chatheight: 0, //聊天变化高度
				windowh: 0, //屏幕高度
				msgimg: '', //聊天图片
				chatArr: [
					// 	{
					// 	msg: "你好",
					// 	sender: "王五",
					// 	touser: "张三",
					// 	img: "http://localhost:8000/files/5CJ1664814782.jpg",

					// },
				], //聊天记录
				
				emojiData: [], //表情
				show_e: false,
				sensitiveWordsList: [],

			}
		},
		methods: {
			onClickLeft() {
				uni.redirectTo({
					url: "/pages/newspage/newspage"
				});
			},
			sendMsg() {
				if (!this.msgtxt && !this.msgimg) {
					return
				}
				console.log(this.sensitiveWordsList);
				let newmgs = filtering(this.sensitiveWordsList, this.msgtxt)

				let a = {
					msg: newmgs,
					msgimg: this.msgimg,
					type: 1,
					senderid: this.senderobj.userTel,
					userName:this.senderobj.userName,
					receiverPhone: this.receiverobj,
					headerphoto: this.senderobj.userPhoto,
				}
				console.log(a, 154);
				this.socket.emit("send_msg", a)
				this.chatArr.push(a)
				this.msgtxt = ""
				this.msgimg = ''
				this.$nextTick(() => {
					this.scrollTopHeight += 300 //自动下来状态
					// console.log("拉动了");
				})
			},
			focusTextarea(e) {
				this.inputBottom = e.detail.height + 20;
				this.chatheight = e.detail.height
			},
			blurTextarea(e) {
				this.inputBottom = 20;

				this.chatheight = 0
			},

			selemoji(m) { //选择表情
				console.log(m);
				this.msgtxt += m
			},
			//打开相册
			chooseimg() {
				// console.log(111);
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {

						let tempFilePaths = res.tempFilePaths;
						console.log(tempFilePaths[0]);
						uni.uploadFile({
							url: 'http://112.74.185.144:8000/api/common/uploadfile', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'file': tempFilePaths[0]
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data).data);
								this.msgimg = JSON.parse(uploadFileRes.data).data
								console.log(this.msgimg);
								this.sendMsg()
							}
						});

					}
				});
			},

			// 请求聊天记录
			getchatinfo() {
				request({
					url:"api/getkefumsg",
					data:{
						sendid:this.senderobj.userTel,
						receiverPhone:this.receiverobj,
						type:'user'
					},
					success:(resp)=>{
						console.log(resp.data.data,213);
						resp.data.data.forEach(item=>{
							this.chatArr.push({
								msg:item.chatContent,
								msgimg:item.msgimg,
								userName:item.userName,
								senderid:item.sendPhone,
								headerphoto:item.userPhoto
							})

						})
						this.$nextTick(() => {
							this.scrollTopHeight = 300*this.chatArr.length//自动下来状态

						})
					}
				})
			}
		},
		onLoad(option) {
			request({
				url: 'api/userTabel/userinfo',
				data: {
					userTel: uni.getStorageSync("userTel") //登录者
				},
				success: (resp) => {
					console.log(resp.data, 347);
					this.senderobj = resp.data.data[0]
					// this.getchatinfo()
				}
			})
			this.socket.on('connect', () => {
				// ws连接已建立，此时可以进行socket.io的事件监听或者数据发送操作
				// 连接建立后，本插件的功能已完成，接下来的操作参考socket.io官方客户端文档即可
				console.log('ws 已连接');
				this.socket.emit('login', {
					loginer:uni.getStorageSync("userTel"),
					time: +new Date(),
				});
				this.socket.emit('onchat', {
					receiverPhone: this.receiverobj
				})
			});
			this.socket.emit('findcustomer', {

			})
			this.socket.on('findcustomer', (msg) => {
				this.receiverobj = msg.senderid  //如果没有则是机器人
				//获取客服信息
				// request({
				// 	url:'api/userTabel/userinfo',
				// 	data:{
				// 		userTel: option.receiverPhone   //对方号码

				// 	},
				// 	success:(resp)=>{
				// 		console.log(resp.data,347);
				// 		this.receiverobj=resp.data.data[0]
				// 	}
				// })
				this.chatArr.push(msg)
				console.log(msg,254);
				this.$nextTick(() => {
					this.scrollTopHeight += 300 //自动下来状态
				})
			})



			let self = this;
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res.screenHeight); //屏幕高度  注意这里获得的高度宽度都是px 需要转换rpx
					// console.log(res.windowWidth); //可使用窗口宽度
					// console.log(res.windowHeight); //可使用窗口高度
					// console.log(res.screenWidth); //屏幕宽度
					self.windowh = res.windowHeight

				}
			});
			//敏感词汇过滤
			request({
				url: "api/sensitiveTable/get",
				data: {

				},
				success: (res) => {
					this.sensitiveWordsList = res.data.data.map(item => {
						return item.sensitiveField
					})
				}
			})
			//表情处理

			var page = Math.ceil(emoji.length / 30);
			for (let i = 0; i < page; i++) {
				this.emojiData[i] = [];
				for (let k = 0; k < 30; k++) {
					emoji[i * 30 + k] ? this.emojiData[i].push(
						emoji[i * 30 + k]
					) : ''
				}
			}
			this.socket.on('connect', () => {
				console.log('ws 已连接');

			});
			this.socket.on('relogin', (msg) => {
				console.log('ws 收到服务器消息', msg);
			});
			this.socket.on('success', (msg) => {
				console.log('ws 收到服务器消息', msg);
			});
			// 接受消息
			this.socket.on('message', (msg) => {
				console.log('ws 收到服务器消息', msg);
				this.chatArr.push(msg)
				this.$nextTick(() => {
					this.scrollTopHeight += 300 //自动下来状态
				})
			});
			// 客服上线提示
			this.socket.on('linetip', (msg) => {
				if (this.receiverobj == 'root') {
					if (msg.type == 'kefu') {
						console.log("有客服了");
						this.receiverobj = msg.id
						this.chatArr.push(msg)
					}
				}
			})
			//查询对方是否在
			// this.socket.on('findacc', (msg) => {
			// 	console.log('查找结果', msg);
			// 	this.online = msg.result

			// });
			//查找对方在不在线
			// this.socket.emit('findacc', {
			// 	receiverPhone: option.receiverPhone
			// })
		},

		destroyed() {
			this.socket.emit('outchat', {

			})
		}
	}
</script>

<style scoped>
	/* @import url("/components/gaoyia-parse/parse.css") */
	.header {
		height: 50px;
	}

	.title-nav {
		font-weight: 700;
	}

	.icon-xitongfanhui {
		font-weight: 600;
	}

	.input-item {
		position: fixed;
		bottom: 20px;
	}

	.input-item-1 {
		display: flex;
		align-items: center;
		width: 750rpx;
		background-color: rgb(245, 245, 245);
	}

	.input-item-1 .iconfont {
		font-size: 31px;
		margin-right: 10px;
	}

	.input-item-1 .iconfont:nth-child(3) {
		font-size: 34px;
		margin-left: 10px;
		transition: all 0.3s;
	}

	.icon-fasong {}

	.input-item-1 input {
		background-color: rgb(255, 255, 255);
		width: 65%;
		height: 40px;
		margin-left: 15px;
		border-radius: 15px;
		box-sizing: border-box;
		padding-left: 5px;
		margin-right: 28px;
	}

	.activeicon {
		transform: rotate(-45deg);
	}

	.tooldiv {
		height: 100px;
		width: 750rpx;
		display: flex;
		justify-content: space-around;
		padding-top: 10px;
		background-color: rgb(245, 245, 245)
	}


	.tooldiv-item .iconfont {
		font-size: 46px;
		padding: 6px;
		background: white;
		border-radius: 10px;

	}

	.tool-txt {
		text-align: center;
		margin-top: 5px;
		font-size: 12px;
	}

	/* 	.chat-content{
		height: 100vh;
	} */
	.chat-item1 {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-bottom: 10px;

	}

	.chat-item1>image {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 15rpx;
		margin-left: 10px;
	}

	.chat-content .chatimg {
		width: 200rpx;
		height: 250rpx;
		border-radius: 0;
	}

	.chat-item2 {
		margin-bottom: 10px;
		overflow: hidden;
	}

	.content {
		height: calc(100vh - 160px);
	}

	.chat-item2 image {
		width: 40px;
		height: 40px;
		display: inline-block;
		float: left;
		border-radius: 50%;
		margin-right: 15rpx;
		margin-left: 10px;
	}

	.chat-t {
		max-width: 600rpx;
		padding: 5px;
		background-color: rgb(18, 183, 245);
		border-radius: 12px;
		display: flex;
		word-break: break-all;
		word-wrap: normal;
	}

	.chat-item2 .chat-t {
		background-color: white;
		display: inline-block;
		margin-top: 8px;
	}

	.linetip {
		display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		margin: 0 5px 0 5px;

	}

	.slider {
		width: 375;
		height: 128;

	}

	.slider-emoji {
		width: 375;
		background-color: white;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;

	}

	.slider-emoji-icon {
		width: 53%;
		text-align: center;
		padding: 10.5 0;
		font-size: 25px;
	}

	.lastbox {
		justify-content: flex-start;
	}
</style>
